$f: 19.2;


.home {
  position: relative;
  background: #F9F9F9;

  .bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 100%;
    }
  }

  .main {
    padding: 364/$f+vw 160/$f+vw 120/$f+vw 160/$f+vw ;
    position: relative;
    z-index: 10;

    .title {
      text-align: center;

      h1 {
        color: #0F77FF;
        font-weight: 500;
        line-height: 0.8;
        text-transform: capitalize;
        margin-bottom: 24/$f+vw;
      }

      .tag {
        color: #000;
        font-weight: 300;
        line-height: 1.5;
      }
    }

    .content{
      margin: 250/$f+vw 0 185/$f+vw 0;
      .item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 56/$f+vw 0 0;
        position: relative;
        filter: blur(6px);
        .center{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 52/$f+vw;
          .num{
            width: 90/$f+vw;
            height: 90/$f+vw;
            border-radius: 50%;
            border: 1px solid #0F77FF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0F77FF;
            font-size: 40/$f+vw;
            font-style: normal;
            font-weight: 300;
          }
          .line{
            width: 2/$f+vw;
            height: 400/$f+vw;
            background: linear-gradient(90deg, #BFDAFF 0%, #BFDAFF 100%);
            margin: 30px auto 0;
            div{
              width: 100%;
              height: 0;
              background: linear-gradient(90deg, #BFDAFF 0%, #0F77FF 50%, #BFDAFF 100%);
            }
          }
        }
        &:nth-child(2) {
          .r{
            position: relative;
            left: 60/$f+vw;
            width: 578/$f+vw;
          }
        }
        &:not(:last-child) {
          margin: 0 0 173/$f+vw;
        }
        &:nth-child(2n) {
          flex-direction: row-reverse;
          padding: 0 0 0 56/$f+vw;
        }
        .img{
          width: 695/$f+vw;
          height: 389/$f+vw;
          border-radius: 20/$f+vw;
          overflow: hidden;
          &:hover{
            img{
              transform: scale(1.05);
            }
          }
          img{
            width: 100%;
            height: 100%;
            transition: .6s ease;
          }
        }
        .r{
          width: 638/$f+vw;
          .p1{
            color: #000;
            font-style: normal;
            font-weight: 400;
            line-height: 142.82%; /* 68.554px */
            text-transform: capitalize;
            margin: 0 0 24/$f+vw;
          }
          .p2{
            color: #000;
            font-style: normal;
            font-weight: 300;
            line-height: 36/$f+vw; /* 150% */
          }
        }
      }
    }


  }

  @media screen and (max-width: 1024px) {
    .main{
      padding: 120px 5%;
      .title{
        h1{
          margin-bottom: 12px;
        }
      }
      .content{
        margin: 60px 0 0;
        .item{
          filter: unset;
          flex-direction: column!important;
          padding: 0!important;
          &:not(:last-child) {
            margin: 0 0 30px;
          }
          .img{
            width: 100%;
            height: auto;
            border-radius: 10px;
          }
          .r{
            width: 100% !important;
            left: 0!important;
            margin: 25px 0 0 0 ;
            .p1{
              margin: 0 0 10px;
            }
            .p2{
              line-height: 26px;
            }
          }
          .center{
            display: none;
          }
        }
      }
    }
  }
}